<template>
    <div class="">
    <el-menu
      default-active="0"
      class="el-menu-vertical-demo"
      background-color="#424242"
      text-color="#fff"
      active-text-color="#ffd04b">
      <!-- <el-menu-item index="1" @click="handclick" :disabled="datasting">
        <div class="animate__animated animate__backInLeft">
          <span slot="title">播放</span>
          <el-button type="success" plain>播放</el-button>
        </div>
      </el-menu-item> -->
      <div class="animate__animated animate__backInLeft">
      <el-submenu index="1">
        <template slot="title">
          <!-- <i class="el-icon-location"></i> -->
          <span>设备一</span>
        </template>
<el-menu-item-group>
    <el-menu-item index="1-1" @click="handclicksapn" :disabled="datasting">
        <span slot="title">播放时间设置</span>
    </el-menu-item>
    <el-menu-item index="1-2" @click="handvideoplayerlist" :disabled="datasting">
        <span slot="title">播放切换设置</span>
    </el-menu-item>
</el-menu-item-group>
</el-submenu>
</div>
<div class="animate__animated animate__backInLeft">
    <el-submenu index="2">
        <template slot="title">
          <!-- <i class="el-icon-location"></i> -->
          <span>设备二</span>
        </template>
        <el-menu-item-group>
            <el-menu-item index="2-1" @click="handEquipmentlist">
                <span slot="title">播放时间设置</span>
            </el-menu-item>
            <el-menu-item index="2-2" @click="handEquipmentmiddlle">
                <span slot="title">播放切换设置</span>
            </el-menu-item>
        </el-menu-item-group>
    </el-submenu>
</div>
<!-- <el-menu-item index="4" @click="handstop">
        <div class="animate__animated animate__backInLeft">
          <span slot="title">暂停</span>
          <el-button :plain="true" type="info">暂停</el-button>
        </div>
      </el-menu-item> -->
<!-- <el-menu-item index="4" @click="handspeed" :disabled="datasting">
        <div class="animate__animated animate__backInLeft">
          <span slot="title">快进</span>
        </div>
      </el-menu-item>
      <el-menu-item index="5" @click="handfastback" :disabled="datasting">
        <div class="animate__animated animate__backInLeft">
          <span slot="title">快退</span>
        </div>
      </el-menu-item> -->
<!-- <el-menu-item  index="5" @click="handckremote">
        <div class="animate__animated animate__backInLeft">
          <span slot="title">录制</span>
          <el-button :plain="true" type="danger">录制</el-button>
        </div>
      </el-menu-item> -->
<!-- <el-menu-item  index="6" @click="handreduction">
        <div class="animate__animated animate__backInLeft">
          <span slot="title">录制</span>
          <el-button type="primary" plain>返回原来时间</el-button>
          <el-button :plain="true" type="danger">返回原来时间</el-button>
        </div>
      </el-menu-item> -->
</el-menu>
</div>
</template>
<script>
    import axios from 'axios'
    export default {
        name: 'homesles',
        props: {
            addressdata: String
        },
        data() {
            return {
                play: true,
                stop: true,
                getTimes: new Date().getTime().toString(),
                ip: window.location.hostname,
                record: 'record',
                munis: 0,
                munessie: '',
                datasting: false,
                clipsdata: '',
                reductiondata: 'true'
                    // clips: 'clips get'
            }
        },
        methods: {
            handEquipmentlist() {
                this.$router.push('/Equipmentlist')
            },
            handEquipmentmiddlle() {
                this.$router.push('/Equipmentmiddlle')
            },
            handclicksapn() {
                this.$router.push('/topandmiddle')
                console.log(this.ip)
            },
            handvideoplayerlist() {
                const that = this
                    // axios.get('http://' + this.ip + ':5000/interface', {
                    //   params: {
                    //     clips: that.clips
                    //   }
                    // }).then((res) => {
                    //   console.log(res.data)
                    // })
                    // axios.get('http://' + this.ip + ':9993')
                that.$router.push('/videoplayerlist')
            },
            handclick() {
                const that = this

                function getUserAccount() {
                    return axios.get('http://' + that.ip + ':5000/command', {
                        params: {
                            play: that.play
                        }
                    }).then((res) => {
                        if (res || res.data) {
                            that.datasting = false
                            that.$message({
                                message: '你好，设备正在播放',
                                type: 'success'
                            })
                        }
                    }).catch((error) => {
                        that.$message.error(`服务器连接失败，请检查后台是否开启${error}`)
                    })
                }

                function getUserPermissions() {
                    return axios.get('http://' + that.ip + ':9993', {
                        params: {
                            getTime: that.getTimes
                        }
                    })
                }
                axios.all([getUserAccount(), getUserPermissions()])
                this.$router.push('/')
            },
            handstop() {
                const that = this

                function getUser() {
                    return axios.get('http://' + that.ip + ':5000/stop', {
                        params: {
                            stop: that.stop
                        }
                    }).then((res) => {
                        if (res || res.data) {
                            that.datasting = false
                            that.$message({
                                message: '你好，设备已暂停播放',
                                type: 'success'
                            })
                        }
                    }).catch((error) => {
                        that.$message.error(`服务器连接失败，请检查后台是否开启${error}`)
                    })
                }

                function getUserPermi() {
                    return axios.get('http://' + that.ip + ':9993', {
                        params: {
                            getTime: that.getTimes
                        }
                    })
                }
                axios.all([getUser(), getUserPermi()])
                this.$router.push('/')
                that.munis = 0
                that.munessie = ''
            },
            handckremote() {
                const that = this
                axios.get('http://' + that.ip + ':5000/record', {
                    params: {
                        record: that.record
                    }
                }).then((res) => {
                    // console.log(res)
                    if (res || res.data) {
                        that.datasting = true
                        that.$message({
                            message: '你好，设备正在录制中',
                            type: 'success'
                        })
                    }
                }).catch((error) => {
                    that.$message.error(`服务器连接失败，请检查后台是否开启${error}`)
                })
                axios.get('http://' + that.ip + ':9993', {
                    params: {
                        getTime: that.getTimes
                    }
                })
            },
            handspeed() {
                const that = this
                const mun = 300
                if (this.munis < 5) {
                    that.munis++
                        that.munessie = mun * that.munis
                    axios.get('http://' + that.ip + ':5000/speed', {
                        params: {
                            munessie: that.munessie
                        }
                    })
                    axios.get('http://' + that.ip + ':9993', {
                        params: {
                            getTime: that.getTimes
                        }
                    })
                }
            },
            handfastback() {
                const that = this
                const mun = -300
                if (this.munis < 5) {
                    that.munis++
                        that.munessie = mun * that.munis
                    axios.get('http://' + that.ip + ':5000/fastback', {
                        params: {
                            fastback: that.munessie
                        }
                    })
                    axios.get('http://' + that.ip + ':9993', {
                        params: {
                            getTime: that.getTimes
                        }
                    })
                }
            },
            handreduction() {
                axios.get('http://' + this.ip + ':5000/reduction', {
                    params: {
                        reductiondata: this.reductiondata
                    }
                }).then((res) => {
                    // console.log(res)
                    if (res || res.data) {
                        this.$message({
                            message: '你好，设备返回原来时间成功',
                            type: 'success'
                        })
                    }
                }).catch((error) => {
                    this.$message.error(`服务器连接失败，请检查后台是否开启${error}`)
                })
                axios.get('http://' + this.ip + ':9993', {
                    params: {
                        getTime: this.getTimes
                    }
                })
            }
        }
    }
</script>
<style lang="scss" scoped>
    .el-menu {
        border: none;
    }
    
    .el-menu-item {
        font-size: 20px !important;
    }
    
    .el-menu {
        height: 100vh;
    }
    
    .el-button--danger.is-plain {
        width: 100%;
        background: #424242;
        border: none;
        color: rgb(255, 255, 255);
    }
    
    .el-button--info {
        width: 100%;
        background: #424242;
        border: none;
        color: rgb(255, 255, 255);
    }
    
    .el-button--info.is-plain {
        background: #424242;
        color: rgb(255, 255, 255);
    }
    
    .el-button--success.is-plain {
        width: 100%;
        background: #424242;
        border: none;
        color: rgb(255, 255, 255);
    }
    
    .el-button--primary.is-plain {
        width: 100%;
        background: #424242;
        border: none;
        color: rgb(255, 255, 255);
    }
</style>